<template>

  <Panel style="padding: 20px;margin-bottom: 20px;min-height: 450px;">
    <el-tabs v-model="activeName" type="card" tab-position="left"  @tab-click="handleClick">
      <el-tab-pane label="我的课程" name="lesson">
        <div v-for="(item, index) in myLesson" :key="index" class="course_item">
        <el-card :body-style="{ padding: '0px' }" >
          <img @click="goCourse(item.id)" :src="item.course_img" fit="contain" class="course_image">
          <div style="padding: 14px;">
            <div class="course_title">{{item.name}}</div>
            <div style="margin-top:5px">
              <i class="el-icon-user" style="font-size: 12px; display: inline-block;"></i>
              <p style="font-size:12px; display: inline-block; " >{{item.students}}人已加入学习</p >
              <el-button size="mini" class="course_button" @click="goPlay(item.id)">
                <div>去学习</div>
              </el-button>
             </div>
          </div>
        </el-card>
      </div>
      </el-tab-pane>
      <el-tab-pane label="我的订单" name="myorder">
        <el-table
          :data="myOrderList"
          style="width: 100%">
          <el-table-column
            prop="order_number"
            label="订单号"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="msg"
            label="章节"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="price"
            label="实付金额">
          </el-table-column>
          <el-table-column
            prop="buy_time"
            label="付款时间" show-overflow-tooltip>
            <template slot-scope="props">
                {{props.row.buy_time | localtime }}
            </template>
          </el-table-column>
          <el-table-column
            prop="is_finish"
            label="状态">
            <template slot-scope="props">
              <el-tag v-if="props.row.is_finish" type="success">已完成</el-tag>
              <el-tag v-if="!props.row.is_finish" type="danger">未完成</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="invite_code"
            label="邀请码">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="邀请订单" name="inviteorder">
        <el-table
          :data="myInviteList"
          style="width: 100%">
          <el-table-column
            prop="order_number"
            label="订单号"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="msg"
            label="章节"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="price"
            label="实付金额">
          </el-table-column>
          <el-table-column
            prop="buy_time"
            label="付款时间" show-overflow-tooltip>
            <template slot-scope="props">
                {{props.row.buy_time | localtime }}
            </template>
          </el-table-column>
          <el-table-column
            prop="is_finish"
            label="状态">
            <template slot-scope="props">
              <el-tag v-if="props.row.is_finish" type="success">已完成</el-tag>
              <el-tag v-if="!props.row.is_finish" type="danger">未完成</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="我的邀请码">
        <div style="font-size:20px">
          邀请码：{{this.user.invite_code}}
        </div>
        <p style="color: brown; margin-top: 10px;">分享邀请码给朋友，对方购买课程时输入，立减50元，你将获得奖学金，可由于购买课程</p>
        <p style="color: coral; margin-top: 30px;">在左侧 “邀请订单” 中可以看到你邀请的订单</p>
      </el-tab-pane>
    </el-tabs>
  </Panel>
</template>


<script>
  import api from '@oj/api'
  import { mapGetters } from 'vuex'
  // import utils from '@/utils/utils'
  import { USER_TYPE } from '@/utils/constants'

  export default {
    name: 'CourseDetail',
    data () {
      return {
        myLesson: [],
        myOrderList: null,
        myInviteList: null,
        activeName: 'lesson'
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        this.getLessonList()
      },
      goCourse (id) {
        console.log(id)
        this.$router.push({name: 'course-detail', params: {course_id: id}})
      },
      getLessonList () {
        let query = {}
        query.myLesson = true
        api['getMyLesson'](query).then((res) => {
          this.myLesson = res.data.data
          console.log(this.myLesson)
        }).catch()
      },
      getOrderList () {
        let query = {}
        query.my_order = true
        api['getOrderList'](query).then((res) => {
          this.myOrderList = res.data.data
          console.log(this.myOrderList)
        }).catch()
      },
      getInviteList () {
        let query = {}
        query.my_invite_order = true
        api['getOrderList'](query).then((res) => {
          this.myInviteList = res.data.data
          console.log(this.myInviteList)
        }).catch()
      },
      handleClick (tab, event) {
        if (tab.name === 'myorder' && !this.myOrderList) {
          this.getOrderList()
        }
        if (tab.name === 'inviteorder' && !this.myInviteList) {
          this.getInviteList()
        }
      },
      goPlay (id) {
        this.$router.push({name: 'play', query: {course_id: id, chapter_id: null}})
      }
    },
    computed: {
      ...mapGetters(['user', 'theme']),
      isAdmin () {
        return this.user.admin_type === USER_TYPE.SUPER_ADMIN
      }
    }
  }
</script>



<style lang="less" scoped>
 .course_item {
    width: 270px;
    float: left;
    background: #fff;
    margin-bottom: 24px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #d7d7d7;
    position: relative;
    margin-right: 5px;
  }

  .course_image {
    height: 180px;
    width: 100%;
  }

  .course_title {
    font-weight: 600;
    font-size: 20px;
  }
  
  .course_button {
    float: right;
    padding: 8px; 
    background-color:rgb(91, 177, 113);
    color: white;
  }

  
</style>
